<template>
  <popup
    class="popup"
    v-model:visible="visiblePopup"
    height="280rpx"
    transparency="10%"
    :manualClosePopup="manualClosePopup"
  >
    <template #content>
      <view class="title"
        >订单待支付，请在<span class="show-order-remainder">{{ showOrderRemainder }}</span
        >分钟内支付！
      </view>
      <view class="operation">
        <span class="button cancel" @click="cancelOrder">取消订单</span>
        <span class="button to-pay" @click="toPay">立即支付</span>
      </view>
    </template>
  </popup>
</template>

<script setup lang="ts">
import $API from '@/api'
import Popup from '@/components/popup/index.vue'
import { $modal } from '@/plugins'
import { CreateOrderComplete } from '@/types/response/order'
import { TimeOperations } from '@/utils/TimeUtils'
import { ref, watch, computed } from 'vue'
const emits = defineEmits<{
  (e: 'toPay', createOrderComplete: CreateOrderComplete): void
}>()
const visiblePopup = ref(false)
const createOrderComplete = ref<CreateOrderComplete>()
// const orderTimeout = ref(new Date(new Date().getTime() + 1 * 60 * 1000).getTime())
const showOrderRemainder = ref()
// 动态计算订单超时时间戳
const timeout = computed(() => {
  if (createOrderComplete.value != null) {
    return new TimeOperations().init(createOrderComplete.value.payTimeoutTime).getTimestamp()
  }
  return Date.now()
})
function refreshShowOrderRemainder() {
  // 获取两个日期的毫秒差
  let diff = timeout.value - Date.now()
  if (diff <= 0) diff = 0
  // 计算分、秒、毫秒差
  const minutes = Math.floor(diff / 60000)
  const seconds = Math.floor(diff / 1000) % 60
  const milliseconds = diff % 1000

  // 返回分:秒:毫秒
  showOrderRemainder.value = `${minutes}:${seconds}:${milliseconds}`
  return diff != 0
}
let timer: number = -1
// 何时启动时间定时的时间更新器
watch(
  () => [createOrderComplete.value, visiblePopup.value],
  ([_createOrderComplete, _visiblePopup]) => {
    if (_createOrderComplete != null && _visiblePopup === true && timer === -1) {
      timer = setInterval(() => {
        if (!refreshShowOrderRemainder()) {
          clearInterval(timer)
          visiblePopup.value = false
          timer = -1
        }
      }, 200)
    }
  }
)

function callOut() {
  visiblePopup.value = true
}
// 设置订单信息
function setOrderInfo(inCreateOrderComplete: CreateOrderComplete) {
  createOrderComplete.value = inCreateOrderComplete
}
// 当点击透明层时，
function manualClosePopup() {
  // 去订单detail页
  uni.redirectTo({ url: `/pages/order-pages/order-detail/index?orderId=${createOrderComplete.value!.orderId}` })
}
async function cancelOrder() {
  // 取消订单
  visiblePopup.value = false
  await $modal.showLoading('', async () => {
    return await $API.order.cancel(createOrderComplete.value!.orderId)
  })
  uni.navigateBack()
}
function toPay() {
  emits('toPay', createOrderComplete.value!)
}
function close() {
  visiblePopup.value = false
}

defineExpose({
  callOut,
  setOrderInfo,
  close
})

// style vars
const titleHeight = ref('90rpx')
</script>

<style scoped lang="scss">
.title {
  padding: 0 30rpx;
  height: v-bind(titleHeight);
  font-size: 30rpx;
  border-bottom: 1px solid rgb(234 234 234);
  line-height: v-bind(titleHeight);
  box-sizing: border-box;

  .show-order-remainder {
    color: red;
  }
}

.operation {
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30rpx;
  inset: v-bind(titleHeight) 0 0;
  box-sizing: border-box;

  .button {
    padding: 0 60rpx;
    height: 90rpx;
    font-size: 35rpx;
    background-color: #fff;
    line-height: 90rpx;
  }

  .cancel {
    background-color: #f2f2f2;
  }

  .to-pay {
    color: #fff;
    background-color: #00b26a;
  }
}
</style>
